<script setup lang="ts">
import { watch } from 'vue';
import DargonBlue from '@/assets/imgs/human/dargon_blue.png';
import DargonRed from '@/assets/imgs/human/dargon_red.png';
import Landudu from '@/assets/imgs/human/landudu.png';
import Lubao from '@/assets/imgs/human/lubao.png';
import NormalBlue from '@/assets/imgs/human/normal_blue.png';
import NormalRed from '@/assets/imgs/human/normal_red.png';
import Wls from '@/assets/imgs/human/wls.png';
import Xiaogang from '@/assets/imgs/human/xiaogang.png';
import Xiaolan from '@/assets/imgs/human/xiaolan.png';
import Xiaolannew from '@/assets/imgs/human/xiaolannew.png';
import { useStore } from '../../store';
const store = useStore();

const digitalMap = {
  dargon_blue: DargonBlue,
  dargon_red: DargonRed,
  landudu: Landudu,
  lubao: Lubao,
  normal_blue: NormalBlue,
  normal_red: NormalRed,
  wls: Wls,
  xiaogang: Xiaogang,
  xiaolan: Xiaolan,
  xiaolannew: Xiaolannew
};

function handleSelect(row?: any) {
  const digital = {
    ...row,
    id: row.id,
    url: digitalMap[row.personType as keyof typeof digitalMap],
    type: row.type,
    expectVoice: row.expectVoice
  };
  store.updateDigital(digital);
  // 更新音色
  store.updateVoiceByTimbreId(row.timbreId);
}

// 默认选择第一个
// onMounted(() => {
//   const { id, type } = store.digital;
//   if (!id && !type) handleSelect(store.getDict('digital')[0]);
// });
watch(
  () => store.getDict('digital'),
  value => {
    const { id, type } = store.digital;
    const defaultDigital = value[0];
    // 数据格式转换
    store.updateDefault(
      {
        id: defaultDigital.id,
        url: digitalMap[defaultDigital.personType as keyof typeof digitalMap],
        type: defaultDigital.type,
        expectVoice: defaultDigital.expectVoice
      },
      'digital'
    );

    if (!id && !type && value.length) {
      handleSelect(defaultDigital);
      store.updateVoiceByTimbreId(defaultDigital.timbreId);
    }
  }
);
</script>

<template>
  <div class="list">
    <div class="list-head p-4 pt-6">选择数字人</div>
    <NScrollbar class="list-main select-none">
      <ul class="px-4">
        <li
          v-for="item in store.getDict('digital')"
          :key="item.id"
          :class="{ active: store.getDigitalId() === item.id }"
          class="item-card square flex-center p-2"
          @click="handleSelect(item)"
        >
          <img class="h-full max-h-full object-contain" :src="digitalMap[item.personType as keyof typeof digitalMap]" />
        </li>
      </ul>
    </NScrollbar>
  </div>
</template>

<style scoped lang="scss"></style>
